<template>
  <div class="container">
    <!-- 导航栏 -->
    <van-sticky>
      <van-nav-bar title="开发文档"/>
    </van-sticky>

    <!-- 内容 -->
    <div class="content">
      <div v-for="(docList, i) in allDocList" :key="i">
        <div class="doc-category">{{docList.category}}</div>
        <van-collapse v-model="activeCollapseItemNames" accordion>
          <van-collapse-item v-for="(doc, x) in docList.docs" :key="x" :name="doc.url">
            <template #title>
              <div>{{ doc.title }}</div>
            </template>
            <div class="doc-content">
              <van-row :gutter="docContentStyle.gutter">
                <van-col :span="docContentStyle.titleSpan">请求方式：</van-col>
                <van-col :span="docContentStyle.valueSpan"><van-tag :color="doc.method == 'GET' ? '#0074e8': '#07d407'">{{ doc.method }}</van-tag></van-col>
              </van-row>
              <van-row :gutter="docContentStyle.gutter">
                <van-col :span="docContentStyle.titleSpan">请求路径：</van-col>
                <van-col :span="docContentStyle.valueSpan">{{ doc.url }}</van-col>
              </van-row>
              <van-row :gutter="docContentStyle.gutter" v-if="doc.params">
                <van-col :span="docContentStyle.titleSpan">请求参数：</van-col>
                <van-col :span="docContentStyle.valueSpan">
                  <div v-for="(param, p) in doc.params.split(',')" :key="p">{{ param }}</div>
                </van-col>
              </van-row>
              <van-row :gutter="docContentStyle.gutter">
                <van-col :span="docContentStyle.titleSpan">响应结果：</van-col>
                <van-col :span="docContentStyle.valueSpan">
                  <div v-for="(attr, a) in doc.response.split(',')" :key="a">{{ attr }}</div>
                  <ul v-if="doc.responseData">
                    <li v-for="(data, d) in doc.responseData.split(',')" :key="d">{{ data }}</li>
                  </ul>
                </van-col>
              </van-row>
            </div>
          </van-collapse-item>
        </van-collapse>
      </div>
    </div>

    <!--  底部导航栏 -->
    <van-tabbar route v-model="activeTabBarIndex" active-color="#7458b0" inactive-color="#616161">
      <van-tabbar-item icon="todo-list-o" replace to="/">预订</van-tabbar-item>
      <van-tabbar-item icon="orders-o" replace to="/order-list">订单</van-tabbar-item>
      <van-tabbar-item icon="setting-o" replace to="/settings">设置</van-tabbar-item>
      <van-tabbar-item icon="apps-o" replace to="/api-doc">文档</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTabBarIndex: 3,
      activeCollapseItemNames: [],
      docContentStyle: {
        gutter: 10,
        titleSpan: 6,
        valueSpan: 18
      },
      allDocList: [
        {
          category: '会员管理',
          docs: [
            { title: '会员注册', method: 'POST', url: '/api/member/register',  params: 'username(string), password(string), familyName(string), givenName(string), gender(int), phoneNumber(string)', response: 'state(int), message(string), data(object)' },
            { title: '会员登录', method: 'POST', url: '/api/member/login',  params: 'username(string), password(string)', response: 'state(int), message(string), data(object)', responseData: 'id(int), username(string), familyName(string), givenName(string), gender(int), phoneNumber(string)' },
            { title: '退出登录', method: 'POST', url: '/api/member/logout',  params: '', response: 'state(int), message(string)' },
          ]
        },
        {
          category: '房型管理',
          docs: [
            { title: '获取房型列表', method: 'GET', url: '/api/public/room-type',  params: '', response: 'state(int), message(string), data(array)', responseData: 'id(int), image(string), name(string), size(string), bed(string), window(string), tags(array > string), originalPrice(int), currentPrice(int), isRunningLow(boolean), stock(int)' },
            { title: '获取房型详情', method: 'GET', url: '/api/public/room-type/{roomTypeId}',  params: 'roomTypeId(int)', response: 'state(int), message(string), data(object)', responseData: 'id(int), image(string), name(string), size(string), bed(string), window(string), tags(array > string), originalPrice(int), currentPrice(int), isRunningLow(boolean), stock(int)' },
          ]
        },
        {
          category: '订单管理',
          docs: [
            { title: '预订客房', method: 'POST', url: '/api/public/order/booking',  params: 'roomTypeId(int), checkInDate(string), checkOutDate(), familyName(string), givenName(string), gender(int), phoneNumber(string)', response: 'state(int), message(string)' },
            { title: '获取订单列表', method: 'GET', url: '/api/public/order',  params: '', response: 'state(int), message(string), data(array)', responseData: 'orderId(int), roomTypeImage(string), roomTypeName(string), checkInDate(string), checkOutDate(), bookingDays(int), customerFamilyName(string), customerGender(int), customerPhoneNumber(string), totalPrice(int), status(int), paymentStatus(int), paymentSerialNumber(string), paymentMode(int)' },
            { title: '获取订单详情', method: 'GET', url: '/api/public/order/{orderId}',  params: 'orderId(int)', response: 'state(int), message(string), data(object)', responseData: 'orderId(int), roomTypeImage(string), roomTypeName(string), checkInDate(string), checkOutDate(), bookingDays(int), customerFamilyName(string), customerGender(int), customerPhoneNumber(string), totalPrice(int), status(int), paymentStatus(int), paymentSerialNumber(string), paymentMode(int)' },
            { title: '取消订单', method: 'POST', url: '/api/public/order/{orderId}/cancel',  params: 'orderId(int)', response: 'state(int), message(string)' }
          ]
        },
      ]
    }
  }
}
</script>

<style scoped>
.container { max-width: 400px; background-color: #f6f6f6; height: 100vh; }
.van-tabbar { max-width: 400px; }

.content { padding: 0 0 70px 0; height: 100vh; }
.doc-category { line-height: 36px; font-size: 12px; color: #616161; padding: 0 20px; }
.doc-content { }
::v-deep .van-collapse-item__content { color: #999; }
.doc-content .van-row { padding: 5px 0; border-bottom: 1px solid #ebedf0; }
.doc-content .van-row:last-child { border-bottom: none; }
.doc-content li { list-style: circle; margin-left: 14px; }
</style>